@focusedTop: calc((100vh - 243px)/2);
.loginMain{
    position: fixed;
    top: 0;
    z-index: 99;
    width: 7.5rem;
    height: 100vh;
    transition: opacity .3s;
    background-color: rgba(0, 0, 0, .4);
    opacity: 1;
    pointer-events: all;

    .wptWapLogin{
        width: 6.1rem;
        height: 3.91rem;
        border-radius: 0.1rem;
        -moz-border-radius: 0.1rem;
        -webkit-border-radius: 0.1rem;
        background-color: #FFF;
        position: fixed;
        z-index: 10000;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -moz-user-select: -moz-none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        animation: bluredAnimation .3s ease;
        animation-iteration-count: 1;
        -webkit-animation: bluredAnimation .3s ease;
        -webkit-animation-iteration-count: 1;
    
        &.inputOnFocus{
            top: @focusedTop;
            animation: focusedAnimation .3s ease;
            animation-iteration-count: 1;
            -webkit-animation: focusedAnimation .3s ease;
            -webkit-animation-iteration-count: 1;
        }

        &.noAnimation{
            animation: none;
        }

        .topBar{
            width: 100%;
            height: 0.32rem;
            color: #505050;
            letter-spacing: 0;
            position: relative;
            margin-top: 0.29rem;
    
            .label{
                width: 100%;
                text-align: center;
                line-height: 0.32rem;
                font-size: 0.32rem;
            }
    
            .close{
                font-family: "wptFontMain" !important;
                width: 0.23rem;
                height: 0.23rem;
                line-height: 0.23rem;
                color: #BDC0C5;
                position: absolute;
                top: -0.04rem;
                right: 0.3rem;
                cursor: pointer;
                margin-top: 0.045rem;
                font-size: 0.34rem;
                transform: rotate(45deg);
                -webkit-transform: rotate(45deg);
    
                &::before{
                    content: "\e625";
                }
            }
        }
    
        .inputContainer{
            height: 0.32rem;
            line-height: 0.32rem;
            margin: 0.86rem 0.41rem 0 0.41rem;
            font-size: 0.4rem;
            color: #030303;
            letter-spacing: 0;
            display: flex;
            
            .numInput{
                width: 2.8rem;
            }

            .countryCode{
                color: #169bd9;
            }
    
            .columnDiliver{
                margin: 0 0.21rem;
                width: 1px;
                border-left: #ddd solid 1px;
            }
    
            .placeHolder{
                color: #E9E9E9;
            }
        }
    
        .rowDiliver{
            margin: 0.16rem 0.41rem 0 0.41rem;
            height: 1px;
            border-top: #ddd solid 1px;
    
        }
    
        .next{
            height: 0.76rem;
            line-height: 0.76rem;
            margin: 0.4rem 0.45rem 0 0.45rem;
            border-radius: 0.08rem;
            -moz-border-radius: 0.08rem;
            -webkit-border-radius: 0.08rem;
            text-align: center;
            background-color: #06bc07;
            color: #FFF;
            font-size: 0.32rem;
            letter-spacing: 0;
    
            &.disabled{
                background-color: #ccc;
            }
        }
    
    }

    .wptCodeCheck{
        width: 6.1rem;
        height: 3.91rem;
        border-radius: 0.1rem;
        -moz-border-radius: 0.1rem;
        -webkit-border-radius: 0.1rem;
        background-color: #FFF;
        position: fixed;
        z-index: 10000;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -moz-user-select: -moz-none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
        animation: bluredAnimation .3s ease;
        animation-iteration-count: 1;

        &.inputOnFocus{
            top: @focusedTop;
            animation: focusedAnimation .3s ease;
            animation-iteration-count: 1;
        }
        
        &.noAnimation{
            animation: none;
        }

        .topBar{
            width: 100%;
            height: 0.32rem;
            color: #505050;
            letter-spacing: 0;
            position: relative;
            margin-top: 0.29rem;

            .last{
                font-family: "wptFontMain" !important;
                width: 0.23rem;
                height: 0.23rem;
                line-height: 0.23rem;
                color: #BDC0C5;
                position: absolute;
                top: 0;
                left: 0.3rem;
                cursor: pointer;
                margin-top: 0.045rem;
                font-size: 0.3rem;
                transform: rotate(180deg);
                -webkit-transform: rotate(180deg);
    
                &::before{
                    content: "\e629";
                }
            }
    
            .label{
                width: 100%;
                text-align: center;
                line-height: 0.32rem;
                font-size: 0.32rem;
            }
    
            .close{
                font-family: "wptFontMain" !important;
                width: 0.23rem;
                height: 0.23rem;
                line-height: 0.23rem;
                color: #BDC0C5;
                position: absolute;
                top: -0.04rem;
                right: 0.3rem;
                cursor: pointer;
                margin-top: 0.045rem;
                font-size: 0.34rem;
                transform: rotate(45deg);
                -webkit-transform: rotate(45deg);
    
                &::before{
                    content: "\e625";
                }
            }
        }

        .remindFrom{
            margin-top: .24rem;
            margin-left: .79rem;
            color: #BDC0BA;
            font-size: .26rem;
        }

        .telephoneContainer{
            display: flex;
            margin: 0.35rem 0.79rem 0 0.79rem;
            justify-content: space-between;
            align-items: center;

            .telephone{
                line-height: 0.54rem;
                font-size: 0.28rem;
                color: #969696;
                letter-spacing: 0;
            }

            .countDownButton{
                width: 1.4rem;
                height: 0.54rem;
                line-height: 0.54rem;
                text-align: center;
                border-radius: 0.05rem;
                -moz-border-radius: 0.05rem;
                -webkit-border-radius: 0.05rem;
                background: #06BC07;
                color: #FFF;
                font-size: 0.24rem;

                &.disabled{
                    background-color: #DCDCDC;
                }
            }
        }

        .codeInputContainer{
            margin: 0.42rem 0.79rem 0 0.79rem;
            display: flex;
            justify-content: space-between;
            
            .codeContainer{
                width: 0.88rem;
                height: 0.88rem;
                line-height: 0.88rem;
                border: 1px solid #D8D8D8;
                text-align: center;
                color: #030303;
                font-size: 0.42rem;
                
                &.onfocus{
                    border: 1px solid #426bf2;
                }
            }
        }
    }
}

@keyframes bluredAnimation
{
    from {top: @focusedTop;}
    to {top: 50%;}
}

@-webkit-keyframes bluredAnimation
{
    from {top: @focusedTop;}
    to {top: 50%;}
}

@keyframes focusedAnimation
{
    from {top: 50%;}
    to {top: @focusedTop;}
}

@-webkit-keyframes focusedAnimation
{
    from {top: 50%;}
    to {top: @focusedTop;}
}